<template>
    <div class="page-container">
        <div class="page-wrapper" :style=" { height:'560px', backgroundImage:`url(${bgImg})` }">
            <div class="page-content">
                <div class="text-container">
                    <div class="text">华翊产品</div>
                    <div class="sub-text" style="margin:36px 0;">应用、算法、服务、硬件 独立交付、灵活配置</div>
                    <el-button size="large" color="#335CFF" @click="handleGo">立即试用</el-button>
                </div>
            </div>
        </div>
        <div class="page-wrapper" style="height:auto; background:#F5F7FA;">
            <div class="page-content" style="padding:50px 0;">
                <div style="margin-bottom:50px; text-align:center;">
                    <div class="custom-radio">
                        <div 
                            v-for="item in menuData"
                            :key="item.key"
                            :class="{ 'custom-radio-item':true, 'selected':item.key === menuKey  }"
                            @click=" menuKey = item.key "
                        >
                            {{  item.label }}
                        </div>
                    </div>
                </div>
                <!-- 应用列表 -->
                <div class="list-container">
                    <div class="list-title"></div>
                    <div class="list-content">
                        <div
                            v-if="menuKey === 'hardware'"
                            v-for="item in list"
                            class="card-2"
                            @click="$router.push(`/product-detail?type=hardware&id=${item.id}`)"
                        >
                            <div class="card-2-avatar" :style="{ backgroundImage:`url(${getFullPath( item.productImgs ? item.productImgs.split(',')[0] : '' )})`}"></div>
                            <div class="card-2-content">
                                <div class="card-2-title">{{ item.productShortTitle }}</div>
                                <div class="card-2-text">{{  item.productTitle }}</div>
                            </div>
                        </div>
                        <div
                            v-else
                            v-for="item in list"
                            :key="item.appCode"
                            class="card"
                            @click="handleRoute(item[dynamicKey])"
                        >
                            <div class="card-title">
                                <div class="card-avatar"><img :src="menuKey === 'algorithm' ? item[menuKey + 'Icon'] : getFullPath( item[menuKey + 'Icon'])" /></div>
                                <div class="card-text">{{  item[menuKey + 'Name'] }}</div>
                                <div style="margin-left:auto; "><el-icon color="#99a0ae" size="20" ><Right /></el-icon></div>
                            </div>
                            <el-tooltip v-if="menuKey === 'algorithm'" effect="light" :width="460" :content="item[menuKey + 'Intro']">
                                <div class="card-content">{{  item[menuKey + 'Intro'] || '还没有填写~' }}</div>
                            </el-tooltip>
                            <div v-else class="card-content">{{  item[menuKey + 'Intro'] || '还没有填写~' }}</div>
                            <div class="card-footer">
                                <div 
                                    v-for="item in getTagList( menuKey === 'app' ? item.appType2 : item.serviceType )"    
                                    class="tag"
                                    :key="item"
                                >{{ item }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页符 -->
                <el-pagination
                    v-if="list.length > 16 "
                    class="custom-pagination"
                    v-model:current-page="pageInfo.currentPage" 
                    v-model:page-size="pageInfo.pageSize"
                    v-model:total="total" 
                    background 
                    layout="prev,pager,next" 
                />
            </div>
        </div>
    </div>
</template>
<script setup>      
    import { watch, reactive, ref, computed, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import { getFullPath, getAppList, getServiceList, getEquipmentList } from '@/api/global.js';
    import bgImg from '../../../public/product-bg.jpg';
    import { Right } from '@element-plus/icons-vue';
    import { json } from './algorithm.js';
    const router = useRouter();
    const pageInfo = reactive({
        currentPage:1,
        pageSize:16
    });
    const total = ref(0);
    const list = ref([]);
    const menuData = [
        { label:'应用', key:'app' },
        { label:'服务', key:'service' },
        { label:'算法', key:'algorithm'},
        { label:'硬件', key:'hardware' }
    ];
    const handleGo = ()=>{
        window.open('http://iot.ifmcs.com', '__blank');
    }
    
    const menuKey = ref('app');
    const dynamicKey = computed(()=>{
        return menuKey.value === 'app' ? 'id' : menuKey.value === 'service' ? 'serviceCode' : 'id';
    })

    const getTagList = (str)=>{
        if ( !str ) return [];
        return str.split(',').slice(0, 3);
    }
    const handleRoute = (id)=>{
        if ( menuKey.value === 'algorithm' ) return;
        router.push(`/product-detail?type=${menuKey.value}&id=${id}`)
    }
    const fetchAppList = ()=>{
        getAppList({ page:pageInfo.currentPage, pageSize:pageInfo.pageSize })
        .then(res=>{
            if ( res.data.code === 200 ){
                list.value = res.data.data;
                total.value = res.data.total;
            }
        })
    } 
    const fetchServiceList = ()=>{
        getServiceList({ page:pageInfo.currentPage, pageSize:pageInfo.pageSize, enable:false })
        .then(res=>{
            if ( res.data.code === 200 ){
                list.value = res.data.data;
                total.value = res.data.total;
            }
        })
    }
    const fetchEquipmentList = ()=>{
        getEquipmentList({ page:pageInfo.currentPage, pageSize:pageInfo.pageSize })
        .then(res=>{
            if ( res.data.code === 200 ){
                list.value = res.data.data.energyEquipmentMallEntities || [];
                total.value = res.data.total;
            }
        })
    }
    const fetchList = ()=>{
        if ( menuKey.value === 'app') {
            fetchAppList();
        } else if ( menuKey.value === 'service' ) {
            fetchServiceList();
        } else if ( menuKey.value === 'hardware') {
            fetchEquipmentList();
        } else if ( menuKey.value === 'algorithm') {
            list.value = json;
        }
        
    }
    watch(menuKey, ()=>{
        pageInfo.currentPage = 1;
    })
    watch([pageInfo.currentPage, menuKey], ()=>{
        fetchList();
    })
    onMounted(()=>{
        fetchList();
    })
</script>
<style scoped>
    .custom-radio {
        border-radius:4px;
        padding:4px;
        display:inline-block;
        background:#fff;
    }
    .custom-radio .custom-radio-item {
        display:inline-block;
        padding:0 40px;
        height:40px;
        line-height:40px;
        border-radius:4px;
        color:#99A0AE;
        margin-right:6px;
        background:transparent;
        transition: all 0.5s;
        cursor: pointer;
    }
    .custom-radio .custom-radio-item:last-child {
        margin-right:0;
    }
    .custom-radio .custom-radio-item:hover {
        background:#fafafa;
    }
    .custom-radio .custom-radio-item.selected {
        background:#335CFF;
        color:#fff;
    }
    .list-container {
        margin-bottom:36px;
    }
    .list-title {
        font-size:16px;
        line-height:30px;
        color:#525866;
        margin-bottom:10px;
    }
    .list-content {
        display:flex;
        align-items: center;
        flex-wrap:wrap;
        gap:24px; 
    }
    .card, .card-2 {
        width:calc( 25% - 18px);
        background:#fff;
        padding:32px;
        border-radius:4px;
        background-image:none;
        transition:all 0.3s;
    }

    .card:hover {
        background-image:url(../../../public/card-hover-bg.png);
    }
    .card-2:hover {
        box-shadow: 0px 2px 12px 2px rgb(57, 58, 63, 0.05);
    }
    .card-2 .card-2-avatar {
        height:200px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size:contain;
        margin-bottom:14px;
    }
    .card-2 .card-2-title {
        font-size:16px;
        line-height:40px;
        color:#0A0D14;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .card-2 .card-2-text {
        font-size:14px;
        color:#777777;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .card .card-title {
        display:flex;
        align-items: center;
        font-size:18px;
        line-height:30px;
        color:#0A0D14;
    }
    .card .card-avatar {
        margin-right:16px;
        line-height:0;
    }
    .card .card-avatar > img {
        width:30px;
        height:30px;
    }
    .card .card-text {
        font-size:18px;
        color:#0A0D14;
        white-space: nowrap;      /* 确保文本在一行内显示 */
        overflow: hidden;         /* 隐藏溢出的内容 */
        text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */ 
    }
    .card .card-content {
        margin:14px 0;
        height:40px;
        line-height:20px;
        padding:0;
        color:#777777;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 显示3行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 多行时显示省略号 */
        white-space:normal;
    }
    .card .card-footer > .tag {
        display:inline-block;
        border-radius:4px;
        border:1px solid #99A0AE;
        font-size:12px;
        line-height:18px;
        padding:2px 8px;
        color:#99A0AE;
    }
</style>